<template>
	<view>
		<!-- <image :src="banners[0].url" mode=""></image> -->
		<swiper
		    class="swiper_wrap"
			:indicator-dots="indicatorDots"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
		>
			<swiper-item v-for="item in banners" :key="item.id">
				<view class="banner">
					<image :src="item.url" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="detail_wrap">
			<view class="price">
				￥108
			</view>
			<view class="food_name">
				<view style="font-size: 15px;color: #242724;">澳洲小龙虾</view>
				<view style="font-size: 15px;color: #242724;">月售：999</view>
			</view>
			<view class="food_introduce">
				<view>
					<text style="color: #979797;margin-right: 8px;font-size: 12px;">自提</text>
					<text style="font-size: 12px;">新蚁鲜净菜-13栋108快递超市，明天12:00提货</text>
				</view>
				<view 
					<text style="color: #979797;margin-right: 8px;font-size: 12px;">保质期</text>
					<text style="font-size: 12px;">7天（10℃以下）</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
           return {
			   userInfo: null,
			   banners: [],
			   foodTypes: [],
			   foods: [],
			   indicatorDots: true,
			   autoplay: true,
			   interval: 2000,
			   duration: 500
		   }
		},
		created() {
			this.loadList()
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo && userInfo.openId) {
				this.userInfo = userInfo
			} else {
				this.authLogin()
			}
		},
		methods: {
			toTypeNav() {
				uni.navigateTo({
					url: '/pages/foodTypes/index',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			toFoodDetail() {
				uni.navigateTo({
					url: '/pages/foodDetail/index',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			async loadList() {
				const result = await this.$request('/homeInfo')
				if (result.status !== 1001) {
					return false
				}
				this.banners = result.data.banners
				this.foodTypes = result.data.foodTypes
				this.foods =result.data.foods
			}
		}
	}
</script>

<style>
page {
	background: #ffffff;
}
.swiper_wrap {
	width: 100%;
	height: 330px;
}
.banner {
	width: 100%;
	height: 330px;
	position: relative;
}
.banner image {
	width: 100%;
	height: 100%;
}
.detail_wrap {
	padding: 15px;
	box-sizing: border-box;
}
.price {
	font-size: 20px;
	color: #242724;
}
.food_name {
	display: flex;
	flex-direction: row;
    align-items: center;
	justify-content: space-between;
	font-size: 12px;
}
.food_introduce {
	background: #F5F5F5;
	padding: 10px 12px;
	box-sizing: border-box;
	margin: 12px 0 16px 0;
}
</style>
